<template>
  <div id='wrap'>
    <h1>effectScope() & getCurrentScope() & onScopeDispose()</h1>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu6',
}
</script>

<script lang='ts' setup>
import { ref,effectScope,getCurrentScope,onScopeDispose } from 'vue'
const scoped=effectScope()
scoped.run(()=>{
    const state=ref(0)
    const interval=setInterval(()=>{
        state.value++
        console.log(state);
        
    },1000)
    console.log(scoped.active);
    const scoped1=getCurrentScope()
    console.log(scoped1 ? '有效作用域' : '无效作用域');
    onScopeDispose(()=>{
        clearInterval(interval)
        console.log('作用域销毁,资源注销');
        console.log(scoped.active);
    })
})
setTimeout(()=>{
    scoped.stop()
},5000)

</script>

<style scoped lang='scss'>

</style>